<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>价格查询</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/swiper/swiper.min.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/priceQuery.css">
</head>

<body>
    <header id="de-head">

    </header>

    <div class="de-main">
        <div class="w1200">
            <div class="pr-param-box">
                <div class="pr-search-param">
                    <div class="pr-search-param-list">
                        <div class="pr-search-param-title">
                            价格类型：
                        </div>
                        <div class="pr-search-param-item">
                            <span class="pr-search-param-tag on">
                                市场报价
                            </span>
                        </div>
                    </div>
                    <div class="pr-search-param-list">
                        <div class="pr-search-param-title">
                            区域类型：
                        </div>
                        <div class="pr-search-param-item">
                            <span class="pr-search-param-tag on">
                                东北地区
                            </span>
                            <span class="pr-search-param-tag">
                                华北地区
                            </span>
                            <span class="pr-search-param-tag">
                                西北地区
                            </span>
                            <span class="pr-search-param-tag">
                                西南地区
                            </span>
                        </div>
                    </div>
                    <div class="pr-search-param-list">
                        <div class="pr-search-param-title">
                            地区选择：
                        </div>
                        <div class="pr-search-param-item">
                            <span class="pr-search-param-tag on">
                                福建
                            </span>
                            <span class="pr-search-param-tag">
                                山东
                            </span>
                            <span class="pr-search-param-tag">
                                福建
                            </span>
                            <span class="pr-search-param-tag">
                                广东
                            </span>
                            <span class="pr-search-param-tag">
                                山东
                            </span>
                            <span class="pr-search-param-tag">
                                福建
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pr-content">
                <div class="pr-block1">
                    <h4 class="pr-block1-title">
                        鸡蛋价格
                    </h4>
                    <div class="pr-block1-desc">
                        价格走势图示
                    </div>
                    <div class="pr-echarts">
                        <div id="price-echars" style="width: 1100;height:400px;"></div>
                    </div>
                </div>
                <div class="pr-block2">
                    <div class="pr-block2-label">
                        <div class="pr-block2-title">
                            价格概览
                        </div>
                        <div class="pr-block2-near">
                            <span class="main-color">近7天</span>
                            <span>近15天</span>
                        </div>
                    </div>

                    <div class="pr-table">
                        <table>
                            <thead>
                                <tr>
                                    <th width="33%">日期</th>
                                    <th>福建价格</th>
                                    <th width="33%">涨跌</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="date">2023-02-06</td>
                                    <td class="price">2570.00</td>
                                    <td class="updown">
                                        <div class="pr-table-btn">
                                            0.00
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="date">2023-02-06</td>
                                    <td class="price">2570.00</td>
                                    <td class="updown">
                                        <div class="pr-table-btn">
                                            0.00
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="date">2023-02-06</td>
                                    <td class="price">2570.00</td>
                                    <td class="updown">
                                        <div class="pr-table-btn up">
                                            +150.00
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="date">2023-02-06</td>
                                    <td class="price">2570.00</td>
                                    <td class="updown">
                                        <div class="pr-table-btn down">
                                            -200.00
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="date">2023-02-06</td>
                                    <td class="price">2570.00</td>
                                    <td class="updown">
                                        <div class="pr-table-btn">
                                            0.00
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="date">2023-02-06</td>
                                    <td class="price">2570.00</td>
                                    <td class="updown">
                                        <div class="pr-table-btn">
                                            0.00
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="date">2023-02-06</td>
                                    <td class="price">2570.00</td>
                                    <td class="updown">
                                        <div class="pr-table-btn">
                                            0.00
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 快捷导航 -->
        <div class="quick-nav">
            <div class="quick-nav-box">
                <div class="quick-nav-title">
                    导航
                </div>
                <ul class="quick-nav-list">
                    <li class="quick-nav-item ">
                        <a href="/dataCenter/industryInfo.html">
                            行业<br>
                            资讯
                        </a>
                    </li>
                    <li class="quick-nav-item on">
                        <a href="/dataCenter/priceQuery.html">
                            价格<br>
                            查询
                        </a>
                    </li>
                    <li class="quick-nav-item">
                        <a href="/dataCenter/regionalPrice.html">
                            地区<br>
                            差价
                        </a>
                    </li>
                    <li class="quick-nav-item ">
                        <a href="/dataCenter/priceMap.html">
                            价格<br>
                            地图
                        </a>
                    </li>
                    <li class="quick-nav-item">
                        <a href="javascript:;">
                            基差<br>
                            查询
                        </a>
                    </li>
                    <li class="quick-nav-item">
                        <a href="javascript:;">
                            物流<br>
                            价格
                        </a>
                    </li>
                    <li class="quick-nav-item">
                        <a href="javascript:;">
                            库存<br>
                            查询
                        </a>
                    </li>
                    <li class="quick-nav-item">
                        <a href="/dataCenter/profitCalculation.html">
                            利润<br>
                            计算
                        </a>
                    </li>
                </ul>
                <div class="quick-nav-backtop">
                    <img src="/images/dataCenter/backtop-ico.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <footer id="de-foot">

    </footer>

    <script src="/plugins/jquery.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugins/echarts.min.js"></script>
    <script src="/js/common.js"></script>


    <script>
        $(function () {
            //  echarts
            var priceEcharts = echarts.init(document.getElementById('price-echars'));
            let data = [
                [
                    "price",
                    "city",
                    "date"
                ],
                [5100, "guangdong", "2023-01-04"],
                [5200, "guangdong", "2023-01-05"],
                [5100, "guangdong", "2023-01-06"],
                [5200, "guangdong", "2023-01-07"],
                [5300, "guangdong", "2023-01-08"],
                [5400, "guangdong", "2023-01-09"],
                [5500, "guangdong", "2023-01-10"],
                [5700, "guangdong", "2023-01-11"],
                [6000, "guangdong", "2023-01-12"],
                [5400, "guangdong", "2023-01-13"],
                [5800, "guangdong", "2023-01-14"],
                [5600, "guangdong", "2023-01-15"],
                [5200, "guangdong", "2023-01-16"],
                [5000, "guangdong", "2023-01-17"],
                [5800, "guangdong", "2023-01-18"],
                [5600, "guangdong", "2023-01-19"],
                [5200, "guangdong", "2023-01-20"],
                [5000, "guangdong", "2023-01-21"],
            ]

            let option = {
                dataset: [
                    {
                        id: 'dataset_raw',
                        source: data
                    },
                    {
                        id: 'dataset_priceEcharts_guangdong',
                        fromDatasetId: 'dataset_raw',
                        transform: {
                            type: 'filter',
                            config: {
                                and: [
                                    { dimension: 'city', '=': 'guangdong' }
                                ]
                            }
                        }
                    }
                ],
                toolbox: {
                    feature: {
                        restore: {},
                    },
                    right: 35,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    splitNumber: 9,

                },
                yAxis: {
                    name: "（元/吨）",
                    splitNumber: 4,
                    scale: true,
                    nameTextStyle: {
                        color: "rgba(102, 102, 102, 1)",
                        fontSize: 10,
                        align: "right",
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 20
                    },
                    {
                        start: 0,
                        end: 20
                    }
                ],
                series: [
                    {
                        name: '价格',
                        type: 'line',
                        datasetId: 'dataset_priceEcharts_guangdong',
                        showSymbol: false,
                        smooth: true,
                        encode: {
                            x: 'date',
                            y: 'price',
                            itemName: 'date',
                            tooltip: ['price']
                        },
                        lineStyle: {
                            color: "rgba(0, 158, 63, 0.5)"
                        },
                        itemStyle: {
                            color: "rgba(0, 158, 63, 0.5)"
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(11, 164, 57, 0.2)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(69, 214, 183, 0.1)'
                                }

                            ])
                        },
                    }
                ]
            };
            priceEcharts.setOption(option);
        })
    </script>
</body>

</html>